<template>
  <div>
    <h1>欢迎光临本店</h1>
    <h4>苹果10元/斤,打8折</h4>
    <div>
      <span>请输入你要购买的斤数</span
      ><input v-model.number="sum" type="number" />
    </div>
    <div><button @click="btn">结账购买</button></div>
    <div>
      <b>账单</b>:
      <span
        >总价<i>{{ num1 }}</i
        >元</span
      >
      <span>折价后</span><i>{{ num2 }}</i
      >元<span
        >省了<i>{{ num3 }}</i
        >元</span
      >
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      sum: "",
      num1: "",
      num2: "",
      num3: "",
    };
  },
  methods: {
    btn() {
      this.num1 = this.sum * 10;
      this.num2 = this.num1 * 0.8;
      this.num3 = this.num1 - this.num2;
    },
  },
};
</script>

<style>
div {
  text-align: center;
  border: 2px dashed red;
}
h1 {
  color: pink;
}
button {
  background-color: blue;
  color: #fff;
}
i {
  font-weight: 700;
  color: red;
}
</style>